<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>1. 基本概念 | 被删的前端游乐场</title>
    <meta name="description" content="Just playing around">
    
    
    <link rel="preload" href="/front-end-playground/assets/css/0.styles.a683ed26.css" as="style"><link rel="preload" href="/front-end-playground/assets/js/app.e5cf4092.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/3.c853767c.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/2.eed49fdd.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/62.378c5cb7.js" as="script">
    <link rel="stylesheet" href="/front-end-playground/assets/css/0.styles.a683ed26.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/front-end-playground/" class="home-link router-link-active"><!----> <span class="site-name">被删的前端游乐场</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/front-end-playground/" class="nav-link">概述</a></div><div class="nav-item"><a href="/front-end-playground/front-end-basic/" class="nav-link">前端基础</a></div><div class="nav-item"><a href="/front-end-playground/vue/" class="nav-link">Vue学习</a></div><div class="nav-item"><a href="/front-end-playground/wxapp/" class="nav-link">小程序学习</a></div><div class="nav-item"><a href="/front-end-playground/front-end-others/" class="nav-link router-link-active">百家齐放</a></div><div class="nav-item"><a href="/front-end-playground/front-end-addon/" class="nav-link">前端的进击</a></div><div class="nav-item"><a href="/front-end-playground/faq.html" class="nav-link">FAQ</a></div> <a href="https://github.com/godbasin/front-end-playground" target="_blank" rel="noopener noreferrer" class="repo-link">
    Github
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/front-end-playground/" class="nav-link">概述</a></div><div class="nav-item"><a href="/front-end-playground/front-end-basic/" class="nav-link">前端基础</a></div><div class="nav-item"><a href="/front-end-playground/vue/" class="nav-link">Vue学习</a></div><div class="nav-item"><a href="/front-end-playground/wxapp/" class="nav-link">小程序学习</a></div><div class="nav-item"><a href="/front-end-playground/front-end-others/" class="nav-link router-link-active">百家齐放</a></div><div class="nav-item"><a href="/front-end-playground/front-end-addon/" class="nav-link">前端的进击</a></div><div class="nav-item"><a href="/front-end-playground/faq.html" class="nav-link">FAQ</a></div> <a href="https://github.com/godbasin/front-end-playground" target="_blank" rel="noopener noreferrer" class="repo-link">
    Github
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0" style="padding-top:;"><!----> <p class="sidebar-heading"><span>玩转 Angular</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0" style="padding-top:;"><!----> <p class="sidebar-heading"><span>试试 Cycle.js</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0" style="padding-top:;"><!----> <p class="sidebar-heading"><span>D3.js 和 Tree</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0" style="padding-top:;"><!----> <p class="sidebar-heading"><span>试试 Three.js</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0" style="padding-top:10px;"><div class="kitty-main" data-v-0cd75e06><span class="stand" data-v-0cd75e06></span> <div class="cat" data-v-0cd75e06><div class="body" data-v-0cd75e06></div> <div class="head" data-v-0cd75e06><div class="ear" data-v-0cd75e06></div> <div class="ear" data-v-0cd75e06></div></div> <div class="face" data-v-0cd75e06><div class="nose" data-v-0cd75e06></div> <div class="whisker-container" data-v-0cd75e06><div class="whisker" data-v-0cd75e06></div> <div class="whisker" data-v-0cd75e06></div></div> <div class="whisker-container" data-v-0cd75e06><div class="whisker" data-v-0cd75e06></div> <div class="whisker" data-v-0cd75e06></div></div></div> <div class="tail-container" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06></div></div></div></div></div></div></div></div></div></div> <p class="sidebar-heading open"><span>BOX2D.js 文档与教程</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/front-end-playground/front-end-others/box2d-tutorial/1-0-basic-catalog.html" class="active sidebar-link">1. 基本概念</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-others/box2d-tutorial/1-0-basic-catalog.html#有关物理引擎" class="sidebar-link">有关物理引擎</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-others/box2d-tutorial/1-0-basic-catalog.html#有关图像引擎" class="sidebar-link">有关图像引擎</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-others/box2d-tutorial/1-0-basic-catalog.html#box2d" class="sidebar-link">Box2D</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-others/box2d-tutorial/1-0-basic-catalog.html#helloworld" class="sidebar-link">HelloWorld</a></li></ul></li><li><a href="/front-end-playground/front-end-others/box2d-tutorial/2-0-world.html" class="sidebar-link">2. 物理世界</a></li><li><a href="/front-end-playground/front-end-others/box2d-tutorial/3-0-shape-and-body.html" class="sidebar-link">3. 形状 shape - 刚体 body</a></li><li><a href="/front-end-playground/front-end-others/box2d-tutorial/4-0-joint.html" class="sidebar-link">4. 关节 joint</a></li><li><a href="/front-end-playground/front-end-others/box2d-tutorial/5-0-operation.html" class="sidebar-link">5. 操作 operation</a></li><li><a href="/front-end-playground/front-end-others/box2d-tutorial/6-1-create-and-init-world.html" class="sidebar-link">6-1. 创建世界并初始化</a></li><li><a href="/front-end-playground/front-end-others/box2d-tutorial/6-2-add-body.html" class="sidebar-link">6-2. 添加刚体</a></li><li><a href="/front-end-playground/front-end-others/box2d-tutorial/6-3-add-bound.html" class="sidebar-link">6-3. 添加边界</a></li><li><a href="/front-end-playground/front-end-others/box2d-tutorial/6-4-mouse-operate-body.html" class="sidebar-link">6-4. 鼠标操作刚体</a></li><li><a href="/front-end-playground/front-end-others/box2d-tutorial/6-5-handle-contact.html" class="sidebar-link">6-5. 处理碰撞刚体</a></li><li><a href="/front-end-playground/front-end-others/box2d-tutorial/7-0-api.html" class="sidebar-link">7. api</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><p>第一章介绍 Box2D 的相关知识，包括物理引擎、图像引擎，以及 Box2D 的一些相关概念。</p> <h2 id="有关物理引擎"><a href="#有关物理引擎" aria-hidden="true" class="header-anchor">#</a> 有关物理引擎</h2> <h3 id="物理效果"><a href="#物理效果" aria-hidden="true" class="header-anchor">#</a> 物理效果</h3> <p>所谓物理效果，就是在游戏中模仿现实中真实物理世界的运动方式。</p> <p>在游戏中，玩家甚至能感受到箱子、石头、布料的触感是怎样的。游戏之所以能实现如此多的动态效果，都要归功于物理运算。</p> <p>但是，在游戏中实现物理运算效果绝非易事。物理运算效果是一种对计算性能要求极高的环境，以一整套独特的物理学算法为基础，需要大量同步运算的能力。</p> <p>游戏开发者通常使用功能强大的物理引擎来实现想要达到的物理效果。</p> <h3 id="物理引擎"><a href="#物理引擎" aria-hidden="true" class="header-anchor">#</a> 物理引擎</h3> <p>物理引擎是一个由计算机模拟牛顿力学的模型。它通过定义刚体（刚性物体）的参数，如质量、速度、摩擦力、动量、扭矩和阻力等，来赋予刚体真实的物理属性，以此计算它们的运动、旋转、碰撞等反应，测试不同情况下的刚体运动效果。</p> <p>物理引擎主要用在科学模拟和电子游戏中。</p> <p>相比之前游戏中的“物理效果”，在游戏中加入了物理引擎之后，游戏不再单纯只是按照预定脚本执行，而是按照预先设定的物理参数遵照宏观世界里的物理规律来运行，换句话说，只要显卡和处理器足够强大，加入了物理引擎的游戏可以模拟真实世界中各种物体的运动，使得游戏效果不再刻板单一，一成不变。</p> <p>通过利用物理引擎，模拟并实现物体之间的相互影响效果是非常简单的，但是，所谓物理引擎并不是指实实在在的物理效果，它只是提供一个平台，游戏开发者可以通过几行简单的代码实现某个特定的效果，非常方便。</p> <h3 id="百度百科-物理引擎"><a href="#百度百科-物理引擎" aria-hidden="true" class="header-anchor">#</a> <a href="http://baike.baidu.com/view/721450.htm" target="_blank" rel="noopener noreferrer">百度百科-物理引擎<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></h3> <p>物理引擎通过为刚性物体赋予真实的物理属性的方式来计算运动、旋转和碰撞反映。为每个游戏使用物理引擎并不是完全必要的—简单的“牛顿”物理（比如加速和减速）也可以在一定程度上通过编程或编写脚本来实现。然而，当游戏需要比较复杂的物体碰撞、滚动、滑动或者弹跳的时候（比如赛车类游戏或者保龄球游戏），通过编程的方法就比较困难了。</p> <p>物理引擎使用对象属性（动量、扭矩或者弹性）来模拟刚体行为，这不仅可以得到更加真实的结果，对于开发人员来说也比编写行为脚本要更加容易掌握。好的物理引擎允许有复杂的机械装置，像球形关节、轮子、气缸或者铰链。有些也支持非刚性体的物理属性，比如流体。物理引擎可以从另外的厂商购买，而一些游戏开发系统具备完整的物理引擎。但是要注意，虽然有的系统在其特性列表中说他们有物理引擎，但其实是一些简单的加速和碰撞检测属性而已。</p> <h2 id="有关图像引擎"><a href="#有关图像引擎" aria-hidden="true" class="header-anchor">#</a> 有关图像引擎</h2> <h3 id="二维图像引擎"><a href="#二维图像引擎" aria-hidden="true" class="header-anchor">#</a> 二维图像引擎</h3> <p>二维图像引擎是主要使用在二维游戏中，绘制图像，并向外部表达图像的系统。在三维游戏中，亦有使用二维引擎来绘制游戏界面以及一些二维元素。</p> <p>由于二维游戏的图像都是平面结构，所以图像引擎在显示图像之前也往往只对图像本身进行处理，而不像三维游戏那样还要处理图像周围的环境。这种处理一般是将图像伸缩，变形，色彩处理，图像合成等。</p> <p>二维图像引擎由角色图像、场景地图、动态、光影和特效组成，功能强大。</p> <h3 id="百度百科-二维图像引擎"><a href="#百度百科-二维图像引擎" aria-hidden="true" class="header-anchor">#</a> <a href="http://baike.baidu.com/view/4432674.htm" target="_blank" rel="noopener noreferrer">百度百科-二维图像引擎<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></h3> <p>一般来说，一套引擎可以使用在多个不同的游戏中，即“可重用性”，由于引擎研发的投资较大，一个商业公司往往开发一款引擎，反复用于多款游戏，从而获得较高利润。如大宇公司的《轩辕剑系列》其正传和外传就是采用同一款引擎开发。也有本身不制作游戏，专门开发引擎并出售的公司。这样的引擎也称作“商业引擎”。出于游戏开发周期和开发成本的考虑，一些商业游戏公司更愿意购买“商业引擎”。</p> <p>游戏引擎的程序基础是建立在使用图形 API 函数基础之上的，而不是直接控制显卡，主要适用于 2D 图像的 API 是 DirectX，而纯 2D 图形 API 往往不能提供更丰富的图像操作支持，一些引擎也使用用于 3D 图像的 API 如 OpenGL，Direct3D 等来模拟 2D。</p> <h3 id="三维图像引擎"><a href="#三维图像引擎" aria-hidden="true" class="header-anchor">#</a> 三维图像引擎</h3> <p>目前，计算机图形学已进入三维时代，三维图形在人们周围无所不在。编写三维图形应用一般使用 OpenGL 或 DirectX，但是它们在系统开发中仍存在一些缺点：</p> <ol><li>它们都是非面向对象的，设计场景和操作场景中的对象比较困难。</li> <li>它们主要使用基层图元，在显示比较复杂的场景时，编写程序相对困难。</li> <li>没有与建模工具很好的结合。</li> <li>缺乏对一些十分重要的关键技术如 LOD(Level of Detail)、动态裁剪等的支持。</li></ol> <p>基于以上情况，游戏开发者需要一个封装了硬件操作和图形算法、简单易用、功能丰富的三维图形开发环境，这个环境即三维图像引擎。</p> <p>相比二维图像引擎，三维引擎需要解决场景构造、对象处理、场景渲染、事件处理、碰撞检测等问题。</p> <h2 id="box2d"><a href="#box2d" aria-hidden="true" class="header-anchor">#</a> Box2D</h2> <h3 id="box2d-介绍"><a href="#box2d-介绍" aria-hidden="true" class="header-anchor">#</a> Box2D 介绍</h3> <p>Box2D 是一个用于游戏的 2D 刚体仿真库，它是一个非常出名的物理引擎。</p> <p>程序员可以在他们的游戏里使用它，它可以使物体的运动更加可信，让世界看起来更具交互性。
从游戏的视角来看，物理引擎就是一个程序性动画(procedural animation)的系统，而不是由动画师去移动你的物体。你可以让牛顿来做导演。</p> <p>它通过用户设定的参数如重力，密度，摩擦，弹性等参数计算碰撞，角度，力和动力等，使物体运动完全遵循牛顿定律，使游戏中物体的运动更加真实，增强游戏世界中物体动作的真实感，从而提高游戏质量，让游戏场景看起来更具交互性。这些计算需要大量的物理和数学知识。</p> <h3 id="box2d-版本"><a href="#box2d-版本" aria-hidden="true" class="header-anchor">#</a> Box2D 版本</h3> <p>Box2D 提供 C++、Java、flash 等版本。</p> <h3 id="box2d-基本概念"><a href="#box2d-基本概念" aria-hidden="true" class="header-anchor">#</a> Box2D 基本概念</h3> <p>Box2D 中有一些基本的对象，这里我们先做一个简要的定义，在随后的文档里会有更详细的描述。</p> <ul><li>刚体(rigid body)</li></ul> <p>一块十分坚硬的物质，它上面的任何两点之间的距离都是完全不变的。它们就像钻石那样坚硬。在后
面的讨论中，我们用物体(body)来代替刚体。</p> <ul><li>形状(shape)</li></ul> <p>一块严格依附于物体(body)的 2D 碰撞几何结构(collision geometry)。形状具有摩擦(friction)和恢
复(restitution)的材料性质。</p> <ul><li>约束(constraint)</li></ul> <p>一个约束(constraint)就是消除物体自由度的物理连接。在 2D 中，一个物体有 3 个自由度。如果我
们把一个物体钉在墙上(像摆锤那样)，那我们就把它约束到了墙上。这样，此物体就只能绕着这个钉子旋
转，所以这个约束消除了它 2 个自由度。</p> <ul><li>接触约束(contact constraint)</li></ul> <p>一个防止刚体穿透，以及用于模拟摩擦(friction)和恢复(restitution)的特殊约束。你永远都不必创建
一个接触约束，它们会自动被 Box2D 创建。</p> <ul><li>关节(joint)</li></ul> <p>它是一种用于把两个或多个物体固定到一起的约束。Box2D 支持的关节类型有：旋转，棱柱，距离等
等。关节可以支持限制(limits)和马达(motors)。</p> <ul><li>关节限制(joint limit)</li></ul> <p>一个关节限制(joint limit)限定了一个关节的运动范围。例如人类的胳膊肘只能做某一范围角度的运
动。</p> <ul><li>关节马达(joint motor)</li></ul> <p>一个关节马达能依照关节的自由度来驱动所连接的物体。例如，你可以使用一个马达来驱动一个肘的
旋转。</p> <ul><li>世界(world)</li></ul> <p>一个物理世界就是物体，形状和约束相互作用的集合。Box2D 支持创建多个世界，但这通常是不必要
的。</p> <h2 id="helloworld"><a href="#helloworld" aria-hidden="true" class="header-anchor">#</a> HelloWorld</h2> <h3 id="步骤"><a href="#步骤" aria-hidden="true" class="header-anchor">#</a> 步骤</h3> <ol><li>建立一个世界，这个世界基于一个 b2AABB 框，并设立了一个 g 值和一个是否允许休眠的 bool 型变量。</li> <li>建立一个静态刚体地表，这里讲述了定义 Box2D 物理引擎中最为重要的一个东西——刚体的详细过程：</li></ol> <ul><li>首先是定义一个形状（可以是复合形状，这个在第二部分讲述）</li> <li>然后把形状通过 AddShape 添加进刚体定义，创建这个刚体。</li></ul> <ol start="3"><li>重复创建刚体这个过程，直至你没有需求了。</li> <li>在你的循环中加入世界的更新函数。</li></ol> <h3 id="概念定义"><a href="#概念定义" aria-hidden="true" class="header-anchor">#</a> 概念定义</h3> <ul><li><p>世界(b2World)：
世界就是一个环境，所有物理运算都在这个里面进行。</p></li> <li><p>形状定义(b2ShapeDef)：
形状定义是什么？说简单点形状定义就是定义你这个对象的样子，它用来做什么？就是用来确定你的碰撞。</p></li> <li><p>刚体定义(b2BodyDef)：
刚体定义就是设定刚体的初始具体，在目前来说，最大的功能就是把你定义好的形状加到你想到的刚体上。</p></li> <li><p>刚体(b2Body)：
刚体就是物理引擎里面的东西（对象），它可以受力的作用进行当前位置的变化旋转等。你要在世界中使用的所有物体目前来说都是刚体。</p></li></ul></div> <!----> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/godbasin/front-end-playground/edit/sourcecode/docs/front-end-others/box2d-tutorial/1-0-basic-catalog.md" target="_blank" rel="noopener noreferrer">帮阿猪改善此页面！</a> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div> <!----> <blockquote>部分文章中使用了一些网站的截图，如果涉及侵权，请告诉我删一下谢谢~</blockquote> <div style="margin-top:30px;"><div class="el-row" style="margin-left:-10px;margin-right:-10px;"><div class="el-col el-col-24 el-col-sm-0 el-col-md-2 el-col-lg-4" style="padding-left:10px;padding-right:10px;display:block;"><div style="width:1px;height:1px;"></div></div> <div class="el-col el-col-24 el-col-sm-24 el-col-md-18 el-col-lg-16" style="padding-left:10px;padding-right:10px;"><div class="el-card box-card is-always-shadow"><div class="el-card__header"><div class="clearfix"><span>温馨提示喵</span></div></div><div class="el-card__body"> <div class="el-row" style="margin-left:-10px;margin-right:-10px;"><div class="el-col el-col-24 el-col-xs-24 el-col-sm-12" style="padding-left:10px;padding-right:10px;"><div class="el-image"><div class="image-slot"><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/assets/img/loading.gif" style="width:100%;"></div><!----></div></div> <div class="el-col el-col-24 el-col-xs-24 el-col-sm-12" style="padding-left:10px;padding-right:10px;"><div class="copyright-text"><div>本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。</div> <div>出处：被删的前端游乐场</div> <div>作者：<a href="https://github.com/godbasin" target="_blank">被删</a></div></div></div></div></div></div></div></div></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/front-end-playground/front-end-others/three-js-test/5-add-mouse-move.html" class="prev">
          5. 添加鼠标移动视角
        </a></span> <span class="next"><a href="/front-end-playground/front-end-others/box2d-tutorial/2-0-world.html">
          2. 物理世界
        </a>
        →
      </span></p></div>  <div class="gitalk-container theme-default-content"><div id="gitalk-container" class="content"></div></div></main> <div id="kitty-container"><span><div role="tooltip" id="el-popover-9867" aria-hidden="true" class="el-popover el-popper" style="width:undefinedpx;display:none;"><!----><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/2code2.jpg" class="image"> <div class="text">牡羊猪的猫粮罐</div> </div><div id="kitty" style="background:url(https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/assets/img/kitty2.svg);"></div></span> <div class="el-dialog__wrapper" style="display:none;"><div role="dialog" aria-modal="true" aria-label="牡羊猪是这样渐渐胖成猪的喵（点击图片可以切换噢）" class="el-dialog" style="margin-top:15vh;"><div class="el-dialog__header"><span class="el-dialog__title">牡羊猪是这样渐渐胖成猪的喵（点击图片可以切换噢）</span><button type="button" aria-label="Close" class="el-dialog__headerbtn"><i class="el-dialog__close el-icon el-icon-close"></i></button></div><!----><!----></div></div></div></div><div class="global-ui"></div></div>
    <script src="/front-end-playground/assets/js/app.e5cf4092.js" defer></script><script src="/front-end-playground/assets/js/3.c853767c.js" defer></script><script src="/front-end-playground/assets/js/2.eed49fdd.js" defer></script><script src="/front-end-playground/assets/js/62.378c5cb7.js" defer></script>
  </body>
</html>
